<template>
    <div class="HomeWork_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack()" >
                    <div class="title_left_ico" >
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text" >返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>防洪巡查</span>
                </div>
                <div slot="titleMenu_add" >
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" :class="[rotate?'go':'aa']"  @click="refresh"  />
                </div>
            </TitleMenu>
        </div>
        <div class="content_104class" id="FloodPatrol_content" v-loading="loading">
            <a-row class="FloodPatrol_title">
                出巡任务列表
            </a-row>
            <a-row class="FloodPatrol_item_row1" v-for="msg in floodsMessage" >
                <a-col :span="24" class="FloodPatrol_time_col1"  @click="jumpRouter(msg)">
                    <div  class="FloodPatrol_time_col1_top">{{new Date(Date.parse(msg.message.timeHappened)) | formatDate}}</div>
                    <div class="FloodPatrol_time_col1_bottom">{{msg.point.lineName}}线{{msg.point.floodsPointName}}达到{{msg.message.warningLevel}}警戒</div>
                </a-col>
            </a-row>

        </div>
        <FooterChaanel></FooterChaanel>
    </div>
</template>
<style>
    .aa{
        transition: all 1s;
    }
    .go{
        transform:rotate(180deg);
        transition: all 1s;
    }
    #FloodPatrol_content{
        background: rgb(237,237,237);
        height: calc(100vh - 66vw);
        width: 100vw;
        overflow: auto;
    }
    .FloodPatrol_title{
        width: 100vw;
        line-height: 16vw;
        font-size: 6vw;
        font-weight: bold;
        color: black;
    }
    .FloodPatrol_item_row1{
        generic-family: Microsoft Yahei;
        background: white;
        margin: 0 0 0.5vw 0;

    }
    #FloodPatrol_info_row{
        margin: 3vw 0 0 0;
        width: 100vw;
        height: 14vw;
        line-height: 14vw;
    }
    .FloodPatrol_item_col1{
        line-height: 14vw;
        text-align: center;
    }

    .FloodPatrol_time_col1{
        color:black;
        padding: 0 0 0 2vw;
    }
    .FloodPatrol_time_col1_top{
        color: black;
        line-height: 6vw;
        font-size:5vw;
        text-align: left;

    }
    .FloodPatrol_time_col1_bottom{
        line-height: 8vw;
        font-size:5vw;
        text-align: left;
        color:red;
    }
    .Group_ico{
        font-size: 7vw;
    }
</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import {mapState} from 'vuex'; //先要引入
    export default {
        name: "FloodPatrol",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        inject:['reload'],
        data() {
            return {
                msg: 'hello vue',
                size: 'large',
                rotate:false,
                loading:false,
            }
        },
        mounted(){
            this.workModeSet();
        },
        computed: {
            ...mapState({
                floodsMessage: state => state.floodsMessage,
            }),
        },
        methods:{
            refresh(){
                this.clickButton();
                this.rotate=!this.rotate;
                this.loading = true;
                setTimeout(function() {
                    this.reload();
                },1000)
            },
            workModeSet(){
                let floodWorkModeId = localStorage.getItem("floodWorkModeId");
                this.$api.workModeSet(floodWorkModeId).then((resp)=>{
                    if(resp.data.status ===200){
                        this.$store.commit("changeWorkModeId",floodWorkModeId);
                        this.$store.commit('changeWorkModeName',"防洪巡查");
                        console.log("切换至防洪巡查模式/FloodPatrol",floodWorkModeId);
                    }else {
                        console.log("切换防洪巡查模式失败/FloodPatrol");
                    }

                }).catch((error)=>{
                    console.log(error);
                });
            },
            jumpBack(){
                this.clickButton();
                this.$router.go(-1);
            },
            jumpRouter(msg){
              this.clickButton();
              this.$router.push({name:'floodPatrolDetail',params:{msg:msg}})
            },
        }
    }
</script>

